<template>
  <el-dialog title="批量导入用户" :visible.sync="addFormVisible1" width="35%" center :before-close="handleClose1">
    <div class="content">
      <span class="rule">用户导入规则</span>
    </div>
    <div class="content">
      <p>
        <span>下载用户导入模板：</span>
        <span style="margin-top: 5px; color: #3079fb; cursor: pointer" @click="downTemplate">下载模板</span>
      </p>
      <p>使用说明：</p>
      <p>1.文件格式必须与模板完全一致，不支持导入加密文件；</p>
      <p>2.用户名不能重复</p>
    </div>
    <div class="fileUpload">
      <span style="width: 120px">请导入模板资源:</span>
      <el-upload ref="formworkFile" class="upload-demo" action="" accept=".xls,.xlsx" :show-file-list="false" :http-request="formworkFile" drag>
        <div style="font-size: 15px">
          <em>点击上传文件</em>
        </div>
      </el-upload>
    </div>
    <ul v-if="formworkFileList && formworkFileList.length > 0">
      <div v-for="item in formworkFileList" :key="item.uid" class="flex">
        <li class="hover">{{ item.name }}</li>
        <span style="cursor: pointer" @click="formworkHandleRemove(item)"><i class="el-icon-delete" /></span>
      </div>
    </ul>
    <span v-else class="msgPoint">仅支持.xls .xlsx格式文件上传</span>
    <div slot="footer" class="dialog-footer btns_box">
      <el-button class="btn1" @click="cancel()">取 消</el-button>
      <el-button class="btn2" type="primary" @click="userImport">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { downTemplate, userImport } from '@/api/user'
export default {
  props: {
    addFormVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      addFormVisible1: false,
      fileList: [],
      formworkFileList: [],
      listShow: true
    }
  },

  watch: {
    addFormVisible() {
      this.addFormVisible1 = this.addFormVisible
    },
    addFormVisible1(row) {
      this.$emit('handleClose', row)
    }
  },
  methods: {
    // 模板下载
    downTemplate() {
      downTemplate()
    },
    // 模板导入
    formworkFile(data) {
      this.formworkFileList = []
      this.formworkFileList.push(data.file)
    },
    // 上传模板删除
    formworkHandleRemove() {
      this.formworkFileList = []
    },

    // 资源附件导入
    uploadFile(data) {
      this.fileList.push(data.file)
    },
    // 资源附件移除
    handleRemove(file) {
      const index = this.fileList.findIndex((item) => file.name === item.name)
      this.fileList.splice(index, 1)
    },

    // 项目导入接口/确认按钮
    userImport() {
      const data = new FormData()
      console.log(' this.formworkFileList[0]', this.formworkFileList[0])

      data.append('file', this.formworkFileList[0])
      userImport(data)
        .then((res) => {
          if (res.code === 200) {
            // if (Array.isArray(res.data) && res.data.length > 0) {
            //   res.data.forEach((el) => {
            //     this.$message.error(el)
            //   })
            // } else {
            //   this.$message.success(res.data)
            // }
            this.addFormVisible1 = false
            this.formworkFileList = []
            this.$emit('listShow', this.listShow)
          } else {
            this.$message.error(res.data)
          }
        })
        .catch((err) => {
          console.log('err', err)
          this.$message.error('导入失败')
        })
    },
    // 取消按钮
    cancel() {
      this.addFormVisible1 = false
      this.formworkFileList = []
      this.fileList = []
    },
    // 弹窗关闭前的回调,会暂停 Dialog 的关闭
    handleClose1(done) {
      this.formworkFileList = []
      this.fileList = []
      done()
    }
  }
}
</script>

<style lang="less" scoped>
  .content {
    padding: 10px;
    border: solid 1px #d7d7d7;
    .rule {
      margin-left: 10px;
      font-family: 'Arial Black', 'Arial Normal', 'Arial', sans-serif;
      font-weight: 900;
      font-style: normal;
      font-size: 14px;
      text-align: left;
      line-height: 10px;
    }
    p {
      margin-left: 10px;
      font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
      color: #606266;
      font-size: 14px;
    }
  }
  .btns_box {
    .btn1 {
      background-color: #ffffff;

      width: 120px;
      padding: 10px 20px;
    }
    .btn2 {
      color: #ffffff;
      margin-left: 20px;

      width: 120px;
      padding: 10px 20px;
    }
  }
  ::v-deep .el-dialog__header {
    text-align: left;
    background-color: #f2f2f2;
  }
  .fileUpload {
    display: flex;
    justify-content: left;
    align-items: center;
    margin-top: 20px;
    margin-right: 5px;
  }
  .upload-demo {
    flex: 1;
  }
  .flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: 90px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    line-height: 14px;
    color: #606266;

    .hover {
      margin: 5px 0;
      list-style-type: none;
    }
  }
  .el-icon-delete {
    color: #606266;
    width: 5px;
    margin-right: 15px;
  }
  .msgPoint {
    margin-left: 150px;
    font-size: 12px;
    color: #7f7f7f;
  }
  ::v-deep .li.hover::marker {
    display: none;
  }
  ::v-deep .el-upload {
    width: 100%;
  }
  ::v-deep ul {
    margin: 0;
  }
  ::v-deep .el-upload-dragger {
    width: 100%;
    height: 28px !important;
    border-radius: 0;
    border: solid 1px #d7d7d7;
    align-self: center;
    padding: 3px;
    margin-left: 5px;
  }
</style>
